<template>
<div>
    <h1>找回密码</h1>
    <group title="找回密码" >
        <x-input title="邮箱" name="username" placeholder="请输入您的邮箱 " v-model.trim='email'></x-input>
        <x-input title="验证码" class="weui-cell_vcode" name="yzm" v-model.trim="yzm" >
            <img @click="koaCaptcha=koaCaptcha+'?'+Math.random()" slot="right" class="weui-vcode-img" :src="koaCaptcha">
        </x-input>
    </group>
    <div class="btn">
        <x-button 
            type="primary" 
            @click.native="btnClick"
            :disabled="btnShow"
        >{{button}}</x-button>
    </div>
    
</div>
</template>


<script>
import { XInput, Group, XButton } from 'vux'
export default {
    data(){
        return {
            email:'',
            yzm:'',
            koaCaptcha:'/api/captcha',
            btnShow:false,
            button:"验证邮箱"
        }
    },
    components: {
        XInput,
        XButton,
        Group,
        
    },
    methods:{
        btnClick(){
            var data = {
                email:this.email,
                yzm:this.yzm
            }
            // this.btnClickAjax()
            if(this.email&&this.yzm){
                this.btnShow = true;
                $.ajax({
                    url:'/users/retrieve',
                    type:'get',
                    data:data
                })
                .done(data=>{
                    console.log(data)
                    this.btnShow = false;
                    if(data.err===2){

                    }
                    if(!data.err){
                        this.btnClickAjax();
                    }
                })
                .fail(err=>{

                })
                .always(function(){
                    console.log("请求已经完成");
                })
            }else{
                this.$vux.toast.text("请输入基本信息");
            }
            
        },
        btnClickAjax(){
            
            let oi = 60;
            this.button = oi+"秒后可重新发送";
            var timer = setInterval(()=>{
                oi--;
                this.button = oi+"秒后可重新发送";
                if(oi<1){
                    clearInterval(timer);
                    this.btnShow = false;
                    this.button = "验证邮箱";
                }
            },1000)
                
        }
    }
}
</script>


<style scoped>
    .btn{
        padding: 0 20px;
        margin-top: 20px;
    }
</style>